<template>
  <div class="left-operate-ptp">
    <div class="title">
      箱体列表
      <!-- <div class="refresh-style" @click="init"></div> -->
    </div>
    <div
      v-for="(item,index) in boxData"
      :key="index"
      class="name-list"
      @click="resClick(item)"
    >
      {{ item.title }}
    </div>
    <div
      v-if="boxData.length == 0"
      class="no-table"
    >
      无光设备数据
    </div>
  </div>
</template>
<script>
import { queryGJByPlanId } from '@/api/service/gisShow2020';
// import axios from 'axios'
export default {
  name: 'LeftOperatePtp',
  props: {
    planId: {
      type: String,
      default: '',
    },
    localConfig: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      boxData: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const that = this;
      const { data } = await queryGJByPlanId(that.planId);
      // console.log(data)
      if (data.success) {
        that.boxData = [];
        data.data.forEach((element) => {
          that.boxData.push(
            {
              int_id: element.int_id,
              title: element.zh_label,
              restype: element.restype,
            },
          );
        });
      }
    },
    resClick(data) {
      this.$emit('select-res', data.int_id, data.restype);
    },
  },
};
</script>
<style lang="scss" scoped>
.left-operate-ptp{
  width: 100%;
  height: 100%;
  .title{
    font-weight: bold;
    color: #7a9ffA;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid #dedede;
    margin: 1px;
    box-sizing: border-box;
    .refresh-style{
      cursor: pointer;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      border:2px solid currentColor;
      border-left:2px solid transparent;
      position: relative;
      margin-right: 6px;
      &:hover{
        animation: loading 1s infinite linear;
        -moz-animation: loading 1s infinite linear;      /* Firefox */
        -webkit-animation: loading 1s infinite linear;   /* Safari 和 Chrome */
        -o-animation: loading 1s infinite linear;        /* Opera */
      }
    }
    .refresh-style::after{
      content: "";
      width: 5px;
      height: 5px;
      border-bottom: 2px solid currentColor;
      border-left: 2px solid currentcolor;
      position: absolute;
      top: 11px;
      left: -1px;
      transform: rotate(90deg);
    }

    @keyframes loading {
      from {transform: rotate(0deg);}
      to {transform: rotate(359deg);}
    }
  }
  .name-list{
    border: 1px solid #cdcdcd;
    height: 30px;
    font-size: 12px;
    width: calc(100% - 4px);
    line-height: 32px;
    margin: 1px;
    cursor: pointer;
  }
  .no-table{
    text-align: center;
    font-size: 12px;
    padding: 10px;
  }
}
</style>
